<template>
    <div class="msg_cont flex_column_between">
        <div class="" v-loading="loading">
            <div class="title_cont cur"> <i class="el-icon-arrow-left" @click="$router.back()"></i> 个人信息</div>
            <el-descriptions title="基本信息" :labelStyle="{color: '#3A3F5E',fontSize: '20px',}" :contentStyle="{color: '#3A3F5E',fontSize: '20px',}">
                <el-descriptions-item label="姓名">{{ info.name || '' }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ info.mobile || '' }}</el-descriptions-item>
                <el-descriptions-item label="生日">{{ info.birthday || '' }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ info.gender && info.gender.name || '' }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="学习情况" :labelStyle="{color: '#3A3F5E',fontSize: '20px',}" :contentStyle="{color: '#3A3F5E',fontSize: '20px',}">
                <el-descriptions-item label="30分钟累计课时">{{ info && info.classHour30Total || 0 }}</el-descriptions-item>
                <el-descriptions-item label="60分钟累计课时">{{ info && info.classHour60Total || 0 }}</el-descriptions-item>
                <el-descriptions-item label="30分钟剩余课时"> {{ info.classHour30 || 0 }}</el-descriptions-item>
                <el-descriptions-item label="60分钟剩余课时">{{ info.classHour60 || 0 }}</el-descriptions-item>
                <el-descriptions-item label="累计识词">{{ info.totalKnowWords }}</el-descriptions-item>
                <el-descriptions-item label="最后登录时间">{{ info.lastLoginTime || '' }}</el-descriptions-item>
                <el-descriptions-item label="最后登录ip">{{ info.lastLoginIp || '' }}</el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>

<script>
import { userDetail } from '@/api/user.js'
import bear_content from '@/views/components/bear_content.vue'

export default {
    components:{
        bear_content
    },
    data() {
        return {
            loading: false,
            infoId: '',
            info: {}
        }
    },
    mounted() {
        this.infoId = this.$route.query.id
        this.getInfo()
    },
    methods:{
        getInfo() {
            this.loading = true
            userDetail({
                id: this.infoId
            }).then(res => {
                this.loading = false
                if (res.error == 0) {
                    this.info = res.data
                }
            })
        },
        readFn(){
            this.$emit('closeFn')
        }
    }
}
</script>

<style lang="scss" scoped>
.msg_cont{
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 34px 32px;
}
.title_cont{
    font-size: 24px;
    margin-bottom: 50px;
}
::v-deep .el-descriptions__title{
    font-size: 24px;
}
::v-deep .el-descriptions :not(.is-bordered) .el-descriptions-item__cell{
    padding-bottom: 30px;
}
.labeClass{
    color: #3A3F5E;
    font-size: 20px;
}
</style>